<template>
  <div class="succ-box">
    <div class="news-title">
      <el-icon><Promotion /></el-icon>
      <div class="title">成功案例</div>
      <div class="cont">
        每个成功案例都是全体志愿者以及各界爱心人士的功劳，是大家团结协作、无私奉献的结果，我们在这里，向每一位参与案例的志愿者致敬。
      </div>
    </div>

    <div class="news-list">
      <div class="box-left">
        <div
          class="succ-item"
          v-for="(item, index) in succNewList"
          :key="index"
        >
          <div class="item-left">
            <a :href="item.link" target="_blank"><img :src="item.img" class="imgs" /></a>
          </div>
          <div class="item-right">
            <a :href="item.link" target="_blank" class="title">{{ item.title }}</a>
            <div class="content">
              <div class="infos">{{ item.content }}</div>
              <div class="time">{{ utils.ymd(item.pubtime) }}</div>
            </div>
          </div>
        </div>
      </div>
      <Searchbar />
    </div>
    
    <div @click="getMore" class="getMore" v-show="total > 10">
      <div v-if="!loading" class="more">更多评论</div>
      <div v-if="loading">没有更多评论</div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import Searchbar from "@/components/common/tabbar/searchbar.vue";
import { getSuccNew, query } from "@/server/succnew";
import { onMounted, ref } from "vue";
import utils from "@/utils/utils";

const succNewList = ref<any>([]);
// const loading = ref(false);

onMounted(async () => {
  await getSuccNews();
});

const total = ref(0);
const loading = ref(false);
const page = ref(1);

const getSuccNews = async () => {
  await getSuccNew().then((res: any) => {
    succNewList.value = res.list;
    total.value = res.total;
  });
};

//加载更多
const getMore = () => {
  if (succNewList.value.length / total.value == 1)
    return (loading.value = true);
  query.pageNum = ++page.value;
  getSuccNew().then((res: any) => {
    // dissList.value = [...dissList.value,...res.list]
    succNewList.value = succNewList.value.concat(res.list);
  });
};
</script>
<style scoped lang="less">
.succ-box {
  width: 80%;
  margin: auto;
  padding-top: 10px;
  .news-title {
    display: flex;
    align-items: center;
    margin: 10px;
    font-size: 26px;
    padding: 5px;
    border-radius: 10px;
    background-color: #eee;
    .title {
      font-weight: bolder;
    }
    .cont {
      font-size: 12px;
      margin-left: 10px;
      color: red;
    }
  }
  .news-list {
    display: flex;
    .box-left {
      padding: 10px;
      padding-top: 0;
      width: 70%;
      margin-right: 10px;
      .succ-item {
        display: flex;
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 10px;
        background-color: #eee;
        .item-left {
          width: 25%;
          height: 150px;
          .imgs {
            width: 100%;
            height: 100%;
          }
        }
        .item-right {
          display: flex;
          width: calc(100% - 25%);
          flex-direction: column;
          margin-left: 15px;
          .title {
            width: 70%;
            font-size: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-bottom: 10px;
          }
          .title:hover{
            color: #c03030;
          }
          .content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 16px;
            .infos {
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
  .getMore {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    .more {
      font-size: 16px;
    }
    .more:hover {
      cursor: pointer;
      color: rgb(76, 76, 227);
    }
  }
}

@keyframes loading {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(5px);
  }
}
</style>
